<!-- eslint-disable vue/max-attributes-per-line -->
<template>
  <div>
    <sec-form
      ref="form"
      class="login-form"
      status-icon
      :rules="rules"
      :model="form"
      label-width="0"
    >
      <sec-form-item
        v-if="options.inputField.includes(fields.username)"
        prop="username"
      >
        <user-name placeholder="请输入用户名" :change="usrChange" />
      </sec-form-item>
      <sec-form-item
        v-if="options.inputField.includes(fields.phone)"
        prop="username"
      >
        <user-name placeholder="请输入手机号" :change="usrChange" />
      </sec-form-item>
      <sec-form-item
        v-if="options.inputField.includes(fields.password)"
        prop="password"
      >
        <password :change="psdChange" />
      </sec-form-item>
      <sec-form-item
        v-if="options.inputField.includes(fields.imgVerification)"
        prop="code"
      >
        <img-verification
          ref="childimg"
          :app-code="appCode"
          :change="codeChange"
          :refresh-random-str="refreshRandomStr"
        />
      </sec-form-item>
      <sec-form-item v-if="options.smsVerify.enable" prop="verificationCode">
        <ems-verification
          :app-code="appCode"
          :verify-type-list="options.smsVerify.verifyTypeList"
          :tab-key="options.tabKey"
          :login-tab="options.loginTab"
          :form="form"
          :change="verifyChange"
          :refresh-code="callImgRefreshCode"
          :domain="domain"
          :rewrite="rewriteVerifyCodeId"
        />
      </sec-form-item>
      <div class="line-tips">
        <sec-checkbox v-model="isRead">
          <span>
            我已阅读并接受
            <a style="color: #3366ff" @click.prevent="jumpToAgreement"
              >《用户协议与隐私条款》</a
            >
          </span>
        </sec-checkbox>
      </div>
      <sec-form-item class="no-margin18">
        <sec-button
          type="primary"
          class="login-submit"
          @click.native.prevent="submit"
        >
          {{ btnText }}
        </sec-button>
      </sec-form-item>
    </sec-form>
  </div>
</template>
<style lang="scss" scope>
.line-tips {
  margin-bottom: 8px;
}
</style>
<script>
import ImgVerification from './ImgVerification.vue'
import EmsVerification from './EmsVerification.vue'
import Password from './Password.vue'
import UserName from './UserName.vue'
import { fields } from './../configuration'
import { loginMixin } from './../mixin/login'
import { rules } from './../rules'

export default {
  name: 'RenderFactory',
  components: { ImgVerification, EmsVerification, Password, UserName },
  mixins: [loginMixin],
  props: {
    openId: {
      type: String,
      default: ''
    },
    unionId: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: '登录'
    },
    domain: {
      type: String,
      default: 'http://ceshi.com'
    },
    appCode: {
      type: String,
      default: ''
    },
    terminalId: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: function () {
        return {
          inputField: ['IMAGE_CODE', 'USERNAME', 'PASSWORD'],
          smsVerify: { enable: false, verifyTypeList: [] },
          loginTab: 'PWD_TAB',
          placeholder: '用户名',
          tabKey: 'account',
          tabName: '账号登录',
          verifyTypeList: []
        }
      }
    }
  },
  data() {
    return {
      fields: { ...fields },
      form: {
        // 用户名 | 手机号
        username: '',
        // 密码
        password: '',
        // 图形验证码
        code: '',
        // 手机验证码: sms | email |
        verificationCodeType: 'SMS',
        verificationCode: '',
        verifyCodeId: '',
        // 随机数: *** 获取图形验证码和手机短信验证码都是同一个，生成收口组件【ImgVerification】 ***
        randomStr: ''
      },
      rules: {
        ...rules
      },
      isRead: false
    }
  },

  methods: {
    rewriteVerifyCodeId(value) {
      this.form.verifyCodeId = value
    },
    callImgRefreshCode() {
      this.$refs.childimg.refreshCode()
    },
    refreshRandomStr(value) {
      this.form.randomStr = value
    },
    usrChange(value) {
      this.form.username = value
    },
    psdChange(value) {
      this.form.password = value
    },
    codeChange(value) {
      this.form.code = value
    },
    verifyChange(value) {
      this.form.verificationCode = value
    },
    jumpToAgreement() {
      const { href } = this.$router.resolve({
        path: '/agreement'
      })
      window.open(href, '_blank')
    },
    submit() {
      if (!this.isRead) {
        this.$message({
          message: '请先阅读并同意用户协议与隐私条款',
          type: 'warning'
        })
        return
      }

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loginExe()
        } else {
          return false
        }
      })
    }
  }
}
</script>
